<!DOCTYPE html>
<html lang="en"  xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="utf-8">
  <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
  <script src="https://cdn.bootcss.com/jspdf/1.3.4/jspdf.debug.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="./axios.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue-resource/1.5.1/vue-resource.min.js"></script>
  <script src="https://ssl.captcha.qq.com/TCaptcha.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/ant-design-vue@1.4.10/dist/antd.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/ant-design-vue@1.4.10/dist/antd.min.css" rel="stylesheet" type="text/css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>	
  <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
  <style type="text/css">
	#test{
	  position:absolute;
	  top:2.7%;
	  left:15%;
	  width:750px;
	  background-color:#ADADAD;
	  display:none;
	}
	.notclick {
			pointer-events: none;
			opacity:0.4;
		}
	#components-layout-demo-basic {
	  text-align: center;
	  position:relative;
	}
	#components-layout-demo-basic .ant-layout-header{
		background-color:black;
		height:100px;
		
	}
	#components-layout-demo-basic .ant-layout-sider {
	  background-color:#FFF;
	  color: black;
	}
	#components-layout-demo-basic .ant-layout-content {
	  
	  color: #fff;
	  min-height: 150px;
	}
	#components-layout-demo-basic > .ant-layout {
	  margin-bottom: 0;
	}
	#components-layout-demo-basic > .ant-layout:last-child {
	  margin: 0;
	}
  </style>
</head>
<body>
 <div id="app">
	
	<div id="components-layout-demo-basic">
		<a-layout>
		  <a-layout-header>
			<div id="tem" style="float:left;margin-left:200px;margin-top:20px;">
				<a-statistic style="color:#fff;" title="温度异常天数" :value="text" />
			</div>
			<div id="out" style="float:left;margin-left:200px;margin-top:20px;">
				<a-statistic style="color:#fff;" title="出入次数" :value="pie_num" />
			</div>
			<div id="outnum" style="float:left;margin-left:200px;margin-top:20px;">
				<a-statistic style="color:#fff;" title="检查次数" :value="pie_num" />
			</div>
			<div id="outnum1" style="float:left;margin-left:200px;margin-top:20px;">
				<a-statistic style="color:#fff;" title="预警人数" :value="warn_num" />
			</div>
			<div id="outnum2" style="float:left;margin-left:200px;margin-top:20px;">
				<a-statistic style="color:#fff;" title="高危人数" :value="warn_num1" />
			</div>
		  </a-layout-header>
		  <a-layout>
			<a-layout-sider>
			<br><br>
				<div>
					<a-input-search style="width:150px;" v-model="name" placeholder="真实姓名" enter-button @search="onSearch" />
				</div>
				<br><br>
				<label style="float:left;font-size:20px;">select month:</label><br/><br/>
				<input v-model="datetime" type="month"/><br/><br/>
				<a-button type="primary" icon="search" @click="testmonth">
				  Search
				</a-button>
				<br><br>
				<label style="float:left;font-size:20px;">start:</label><br/><br/>
				<input v-model="startdate" type="date"/><br/>
				<label style="float:left;font-size:20px;">end:</label><br/><br/>
				<input v-model="enddate" type="date"/><br/><br/>
				<a-button type="primary" icon="search" @click="test">
				  Search
				</a-button>
			</a-layout-sider>
			<a-layout-content>
			  <div>
				<a-tabs default-active-key="1" @change="callback">
				  <a-tab-pane key="1" tab="用户健康统计">
					<div style="float:right;margin-top:10px;margin-right:20px;"><a @click="getPdf">导出pdf</a></div>
					  <div style="float:right;margin-top:10px;margin-right:20px;"><a @click="defa">刷新</a></div>
					  <div id="tab" style="width:800px;;background-color:#FFF;margin:50px auto;">
						<div id="echart" style="width: 800px;height:400px;"></div>
						<h2>用户体温登记表</h2>
						<a-table :data-source="datas" :columns="columns" :pagination="{ pageSize: 10 }">
							
							<div
							  slot="filterDropdown"
							  slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
							  style="padding: 8px"
							>
							  <a-input
								v-ant-ref="c => (searchInput = c)"
								:placeholder="`Search ${column.dataIndex}`"
								:value="selectedKeys[0]"
								style="width: 188px; margin-bottom: 8px; display: block;"
								@change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
								@pressEnter="() => handleSearch(selectedKeys, confirm, column.dataIndex)"
							  />
							</div>
							<a-icon
							  slot="filterIcon"
							  slot-scope="filtered"
							  type="search"
							  :style="{ color: filtered ? '#108ee9' : undefined }"
							/>
						</a-table>
					</div>
				  </a-tab-pane>
				  <a-tab-pane key="2" tab="住户出入统计" force-render>
					<div style="float:right;margin-top:10px;margin-right:20px;"><a @click="getPdf1">导出pdf</a></div>
					  <div style="float:right;margin-top:10px;margin-right:20px;"><a @click="defa">刷新</a></div>
					  <div id="tab1" style="width:800px;;background-color:#FFF;margin:50px auto;">
						<div id="pie_echart" style="width: 800px;height:400px;"></div>
						<h2>住户出入登记表</h2>
						<a-table :data-source="datas" :columns="columnes" :pagination="{ pageSize: 10 }">
							<span slot="status" slot-scope="text, record">
								<span>进/出</span>
							</span>
							<div
							  slot="filterDropdown"
							  slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
							  style="padding: 8px"
							>
							  <a-input
								v-ant-ref="c => (searchInput = c)"
								:placeholder="`Search ${column.dataIndex}`"
								:value="selectedKeys[0]"
								style="width: 188px; margin-bottom: 8px; display: block;"
								@change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
								@pressEnter="() => handleSearch(selectedKeys, confirm, column.dataIndex)"
							  />
							</div>
							<a-icon
							  slot="filterIcon"
							  slot-scope="filtered"
							  type="search"
							  :style="{ color: filtered ? '#108ee9' : undefined }"
							/>
						</a-table>
					</div>
				  </a-tab-pane>
				</a-tabs>
			  </div>
			  
			</a-layout-content>
		  </a-layout>
		</a-layout>
	</div>
	<div id="test">
	<div style="float:right;margin-top:10px;margin-right:20px;">
		<a @click="close"><a-icon type="close" /></a>
	</div>
	<div style="background-color:#FFF;margin:50px 10px;">
		<a-table :data-source="name_data" :columns="column">
			<span slot="action" slot-scope="text, record">
				<a @click="submit(record.residentEntity.resId)">确定</a>
			</span>
					
			<div
				slot="filterDropdown"
				slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
				style="padding: 8px"
				>
				<a-input
					v-ant-ref="c => (searchInput = c)"
					:placeholder="`Search ${column.dataIndex}`"
					:value="selectedKeys[0]"
					style="width: 188px; margin-bottom: 8px; display: block;"
					@change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
					@pressEnter="() => handleSearch(selectedKeys, confirm, column.dataIndex)"
				/>
			</div>
			<a-icon
				slot="filterIcon"
				slot-scope="filtered"
				type="search"
				:style="{ color: filtered ? '#108ee9' : undefined }"
			/>
		</a-table>
		</div>
		
	</div>
  </div>
<script>
	var app = new Vue({
        // e1: '#app',
        //注意这时l来着l
        el: '#app',
		data(){
			return{
				pie_data:[],
				pie_num:0,
				warn_num:0,
				warn_num1:0,
				num:0,
				startdate:"",
				enddate:"",
				name:"",
				text:0,
				datetime:new Date(),
				data:[],
				dates:{},
				bar_data:{},
				date:[],
				bar_num:[],
				datas:[],
				dataes:[],
				name_data:[],
				day:{'01':'31','02':'28','03':'31','04':'30','05':'31','06':'30','07':'31','08':'31','09':'30','10':'31','11':'30','12':'31'},
				searchText: '',
				searchInput: null,
				searchedColumn: '',
				column:[
					{
					  title: '姓名',
					  dataIndex: 'name',
					  key: 'name',
					},
					{
					  title: '身份证号',
					  dataIndex: 'identity',
					  key: 'identity',
					},
					{
					  title: '房号',
					  dataIndex: 'house_id',
					  key: 'house_id',
					},
					{
					  title: 'Action',
					  dataIndex: 'action',
					  key: 'action',
					  scopedSlots: {
						customRender: 'action',
					  },
					}
				],
				columns: [
					{
					  title: '日期',
					  dataIndex: 'date',
					  key: 'date',
					  scopedSlots: {
						filterDropdown: 'filterDropdown',
						filterIcon: 'filterIcon',
						customRender: 'customRender',
					  },
					  onFilter: (value, record) =>
						record.date
						  .toString()
						  .toLowerCase()
						  .includes(value.toLowerCase()),
					  onFilterDropdownVisibleChange: visible => {
						if (visible) {
						  setTimeout(() => {
							this.searchInput.focus();
						  }, 0);
						}
					  },
					  sortDirections: ['descend', 'ascend'],
					  sorter: (a, b) => this.getDate(a.date,"-").getTime()-this.getDate(b.date,"-").getTime()
					
					},
					{
					  title: '姓名',
					  dataIndex: 'name',
					  key: 'name',
					  scopedSlots: {
						filterDropdown: 'filterDropdown',
						filterIcon: 'filterIcon',
						customRender: 'customRender',
					  },
					  onFilter: (value, record) =>
						record.name
						  .toString()
						  .toLowerCase()
						  .includes(value.toLowerCase()),
					  onFilterDropdownVisibleChange: visible => {
						if (visible) {
						  setTimeout(() => {
							this.searchInput.focus();
						  }, 0);
						}
					  },
					},
					{
					  title: '温度',
					  dataIndex: 'temperature',
					  key: 'temperature',
					},
				],
				columnes: [
					{
					  title: '日期',
					  dataIndex: 'date',
					  key: 'date',
					  scopedSlots: {
						filterDropdown: 'filterDropdown',
						filterIcon: 'filterIcon',
						customRender: 'customRender',
					  },
					  onFilter: (value, record) =>
						record.date
						  .toString()
						  .toLowerCase()
						  .includes(value.toLowerCase()),
					  onFilterDropdownVisibleChange: visible => {
						if (visible) {
						  setTimeout(() => {
							this.searchInput.focus();
						  }, 0);
						}
					  },
					  sortDirections: ['descend', 'ascend'],
					  sorter: (a, b) => this.getDate(a.date,"-").getTime()-this.getDate(b.date,"-").getTime()
					
					},
					{
					  title: '姓名',
					  dataIndex: 'name',
					  key: 'name',
					  scopedSlots: {
						filterDropdown: 'filterDropdown',
						filterIcon: 'filterIcon',
						customRender: 'customRender',
					  },
					  onFilter: (value, record) =>
						record.name
						  .toString()
						  .toLowerCase()
						  .includes(value.toLowerCase()),
					  onFilterDropdownVisibleChange: visible => {
						if (visible) {
						  setTimeout(() => {
							this.searchInput.focus();
						  }, 0);
						}
					  },
					},
					{
					  title: '状态',
					  dataIndex: 'status',
					  key: 'status',
					  scopedSlots: {
						customRender: 'status',
					  },
					},
				],
			};
		},
		mounted(){
			this.defa();
		},
		methods:{
			warn(){
				axios.get("http://47.94.215.148:8080/admin/getWarn",{
							withCredentials: true,
					}).then((res)=>{
					this.warn_num=res.data.warn;
					this.warn_num1=res.data.serwarn;
					});
			},
			submit(ids){
				this.close();
				$("#tem").show();
				$("#out").show();
				$("#outnum").hide();
				$("#outnum1").hide();
				$("#outnum2").hide();
				$("#echart").show();
				$("#pie_echart").show();
				this.data=[];
				this.date=[];
				this.datas=[];
				this.dataes=[];
				this.dates={};
				this.bar_data=[];
				this.bar_num=[];
				this.text=0;
				this.pie_num=0;
				this.num=0;
				//this.warn_num=0;
				//this.warn_num1=0;
				axios.get("http://47.94.215.148:8080/admin/findTempByResId?restId="+ids,{
							withCredentials: true,
					}).then((res)=>{
					console.log(res.data);
					for(let i of res.data.message.recordTempEntities){
						i.name=this.name;
						this.dataes.push(i);
						if(this.dates[i.date]==null){
							this.dates[i.date]=i.temperature;
						}
						else{
							this.dates[i.date]=(this.dates[i.date]+i.temperature)/2;
						}
						if(this.bar_data[i.date]==null){
							this.bar_data[i.date]=1;
						}
						else{
							this.bar_data[i.date]+=1;
						}
					}
					this.datas=this.dataes;
					for(var i in this.dates){
						this.date.push(i);
					}
					this.date.sort();
					for(var k in this.date){
						if(this.dates[this.date[k]]>37.3)this.text+=1;
						this.data.push(this.dates[this.date[k]]);
						this.pie_num+=this.bar_data[this.date[k]];
						this.bar_num.push(this.bar_data[this.date[k]]);
					}
					this.echart();
					this.pieEchart();
				});
				
			},
			pieEchart(){
				var myChart = echarts.init(document.getElementById('pie_echart'));
			 
				// 指定图表的配置项和数据
				var option = {
					title: {
						text: '用户外出统计'
					},
					tooltip: {},  //提示框组件
					legend: {              //图例组件
						data:['进出次数']     //图例的数据数组。数组项通常为一个字符串，每一项代表一个系列的 name
					},
					xAxis:{             //直角坐标系 grid 中的 x 轴
						data: this.date,
					},
					yAxis: {
					},
					series: [{                //系列列表
						name: '进出次数',         //系列名称，用于tooltip的显示，legend 的图例筛选
						type: 'bar',          //类型
						data: this.bar_num,         //系列中的数据内容数组。数组项通常为具体的数据项
					}]
				};
				
				myChart.setOption(option);
			},
			callback(key) {
			  console.log(key);
			},
			defa(){
				$("#tem").hide();
				$("#out").hide();
				$("#outnum").show();
				$("#outnum1").show();
				$("#outnum2").show();
				$("#echart").hide();
				$("#pie_echart").show();
				this.name="";
				this.datetime="";
				this.startdate="";
				this.enddate="";
				this.data=[];
				this.date=[];
				this.datas=[];
				this.dataes=[];
				this.dates={};
				this.bar_data=[];
				this.bar_num=[];
				this.text=0;
				this.pie_num=0;
				this.num=0;
				//this.datas=this.dataes;
				this.warn();
				axios.get("http://47.94.215.148:8080/admin/getAllResTemp",{
                        withCredentials: true,
                    }).then((res)=>{
						console.log(res.data);
						this.dataes=res.data.message;
						
						for(let i of res.data.message){
							if(this.dates[i.date]==null){
								this.dates[i.date]=i.temperature;
							}
							else{
								this.dates[i.date]=(this.dates[i.date]+i.temperature)/2;
							}
							if(this.bar_data[i.date]==null){
								this.bar_data[i.date]=1;
							}
							else{
								this.bar_data[i.date]+=1;
							}
						}
						this.datas=this.dataes;
						for(var i in this.dates){
							this.date.push(i);
							
						}
						this.date.sort();
						for(var k in this.date){
							if(this.dates[this.date[k]]>37.3)this.text+=1;
							this.data.push(this.dates[this.date[k]]);
							this.pie_num+=this.bar_data[this.date[k]];
							this.bar_num.push(this.bar_data[this.date[k]]);
						}
						this.pieEchart();
				});
				
			},
			close(){
				$("#test").hide("slow");
				$("#components-layout-demo-basic").removeClass("notclick");
			},
			getPdf(){
			  var target = document.getElementById("tab");
			  target.style.background = "#FFFFFF";

			  html2canvas(target, {
				onrendered:function(canvas) {
					var contentWidth = canvas.width;
					var contentHeight = canvas.height;

				//一页pdf显示html页面生成的canvas高度;
				var pageHeight = contentWidth / 592.28 * 841.89;
				//未生成pdf的html页面高度
				var leftHeight = contentHeight;
				//页面偏移
				var position = 0;
				//a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
				var imgWidth = 595.28;
				var imgHeight = 592.28/contentWidth * contentHeight;

				var pageData = canvas.toDataURL('image/jpeg', 1.0);

				var pdf = new jsPDF('', 'pt', 'a4');

				//有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
				//当内容未超过pdf一页显示的范围，无需分页
				if (leftHeight < pageHeight) {
				pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight );
				} else {
					while(leftHeight > 0) {
						pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
						leftHeight -= pageHeight;
						position -= 841.89;
						//避免添加空白页
						if(leftHeight > 0) {
						  pdf.addPage();
						}
					}
				}

				pdf.save("住户体温登记表.pdf");
			}
		  })
			},
			getPdf1(){
			  var target = document.getElementById("tab1");
			  target.style.background = "#FFFFFF";

			  html2canvas(target, {
				onrendered:function(canvas) {
					var contentWidth = canvas.width;
					var contentHeight = canvas.height;

				//一页pdf显示html页面生成的canvas高度;
				var pageHeight = contentWidth / 592.28 * 841.89;
				//未生成pdf的html页面高度
				var leftHeight = contentHeight;
				//页面偏移
				var position = 0;
				//a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
				var imgWidth = 595.28;
				var imgHeight = 592.28/contentWidth * contentHeight;

				var pageData = canvas.toDataURL('image/jpeg', 1.0);

				var pdf = new jsPDF('', 'pt', 'a4');

				//有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
				//当内容未超过pdf一页显示的范围，无需分页
				if (leftHeight < pageHeight) {
				pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight );
				} else {
					while(leftHeight > 0) {
						pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
						leftHeight -= pageHeight;
						position -= 841.89;
						//避免添加空白页
						if(leftHeight > 0) {
						  pdf.addPage();
						}
					}
				}

				pdf.save("住户外出登记表.pdf");
			}
		  })
			},
			test(){
				this.data=[];
				this.date=[];
				this.datas=[];
				this.bar_num=[];
				this.text=0;
				this.pie_num=0;
				this.num=0;
				$("#outnum1").hide();
				$("#outnum2").hide();
				for(var i in this.dates){
					if(this.getDate(i,'-').getTime()>=this.getDate(this.startdate,'-').getTime()
					&&this.getDate(i,'-').getTime()<=this.getDate(this.enddate,'-').getTime()){
						this.date.push(i);
					}
				}
				this.date.sort();
				for(var k in this.date){
					if(this.dates[this.date[k]]>37.3)this.text+=1;
					this.data.push(this.dates[this.date[k]]);
					this.pie_num+=this.bar_data[this.date[k]];
					this.bar_num.push(this.bar_data[this.date[k]]);
				}
				for(var j in this.dataes){
					if(this.getDate(this.dataes[j]['date'],'-').getTime()>=this.getDate(this.startdate,'-').getTime()
					&&this.getDate(this.dataes[j]['date'],'-').getTime()<=this.getDate(this.enddate,'-').getTime()){
						this.datas.push(this.dataes[j]);
					}
				}
				this.datetime="";
				this.echart();
				this.pieEchart();
			},
			onSearch(){
				axios.get("http://47.94.215.148:8080/admin/findResInfoByName?name="+this.name,{
						withCredentials: true,
					}).then((res)=>{
					console.log(res.data);
					this.name_data=res.data.message;
					this.datetime="";
					this.startdate="";
					this.enddate="";
					$("#test").show("slow");
					$("#components-layout-demo-basic").addClass("notclick");
				});
			},
			handleSearch(selectedKeys, confirm, dataIndex) {
			  confirm();
			  this.searchText = selectedKeys[0];
			  this.searchedColumn = dataIndex;
			},
			testmonth(){
				var da=new Date();
				var arr=this.datetime.split("-");
				this.data=[];
				this.date=[];
				this.datas=[];
				this.bar_num=[];
				this.text=0;
				this.pie_num=0;
				this.num=0;
				$("#outnum1").hide();
				$("#outnum2").hide();
				if(arr[1]=="02"&arr[0]%4==0&arr[0]%100!=0){
					this.day["02"]='29';
				}
				
				for(var i in this.dates){
					if(this.getDate(i,'-').getTime()>=this.getDate(this.datetime+"-01",'-').getTime()
					&&this.getDate(i,'-').getTime()<=this.getDate(this.datetime+"-"+this.day[arr[1]],'-').getTime()){
						this.date.push(i);
					}
				}
				this.date.sort();
				for(var k in this.date){
					if(this.dates[this.date[k]]>37.3)this.text+=1;
					this.data.push(this.dates[this.date[k]]);
					this.pie_num+=this.bar_data[this.date[k]];
					this.bar_num.push(this.bar_data[this.date[k]]);
				}
				for(var j in this.dataes){
					if(this.getDate(this.dataes[j]['date'],'-').getTime()>=this.getDate(this.datetime+"-01",'-').getTime()
					&&this.getDate(this.dataes[j]['date'],'-').getTime()<=this.getDate(this.datetime+"-"+this.day[arr[1]],'-').getTime()){
						this.datas.push(this.dataes[j]);
					}
				}
				this.startdate="";
				this.enddate="";
				this.echart();
				this.pieEchart();
			},
			getTime(date){ 
				return date.substring(0,10);
			},
			getMonths(date){
				return date.substring(5,7)
			},
			getDate(dateStr,separator){
				if(!separator){
					separator="-";
				}
				var dateArr = dateStr.split(separator);
				var year = parseInt(dateArr[0]);
				var month;
				 //处理月份为04这样的情况                         
				if(dateArr[1].indexOf("0") == 0){
					month = parseInt(dateArr[1].substring(1));
				}else{
					month = parseInt(dateArr[1]);
				}
				var day = parseInt(dateArr[2]);
				var date = new Date(year,month -1,day);
				return date;
			},
			echart(){
				// 基于准备好的dom，初始化echarts实例
				var myChart = echarts.init(document.getElementById('echart'));
			 
				// 指定图表的配置项和数据
				var option = {
					title: {
						text: '用户健康统计'
					},
					tooltip: {},  //提示框组件
					legend: {              //图例组件
						data:['体温']     //图例的数据数组。数组项通常为一个字符串，每一项代表一个系列的 name
					},
					xAxis:{             //直角坐标系 grid 中的 x 轴
						data: this.date,
					},
					visualMap: {
						show: false,
						pieces: [
						  {
							gt: 0,
							lte: 37.3,          //这儿设置基线上下颜色区分 基线下面为绿色
							color: '#03d6d6'
						}, {
									
							gt: 37.3,          //这儿设置基线上下颜色区分 基线上面为红色
							color: 'red'
						}]
					},
					yAxis: {
						min:35.0,
						max:42.0,
					},
					series: [{                //系列列表
						name: '体温',         //系列名称，用于tooltip的显示，legend 的图例筛选
						type: 'line',          //类型
						data: this.data,         //系列中的数据内容数组。数组项通常为具体的数据项
					}]
				};
				
				myChart.setOption(option);
			},
		}
	})
</script>
</body>
</html>